<template>
  <a-row class="search-box">
    <a-input-search v-model:value="keyword" placeholder="从TMDB搜索电影，电视剧..." enter-button="搜索" size="large"
      @search="onSearch" allowClear :loading="searching" />
  </a-row>
  <div v-show="!searchShow" >
    <Popular/>
    <Now/>
  </div>
  <div v-show="searchShow" >
    <a-divider>
      共搜索到{{ searchList.length }}条结果
      <a-button type="link" @click="searchShow=false;keyword=''">取消</a-button>
    </a-divider>
    <MediaCardSet :data="searchList" :cardStyle="{width: '220px'}" @close="cleanSearch"/>
  </div>
</template>
  
<script name="index" setup>
import { ref } from 'vue';
import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
import Popular from './Index/popular.vue'
import Now from './Index/now.vue'
import MediaCardSet from './Index/media-card-set.vue'

import MediaApi from '@/api/MediaApi';

const keyword = ref('');

const searchShow = ref(false);
const searching = ref(false);
const searchList = ref([]);

const onSearch = () => {
  if (keyword.value) {
    searching.value = true;
    searchList.value = [];
    MediaApi.search({
      keyword: keyword.value
    }).then(res => {
      if (res.data.data) {
        searchList.value = res.data.data;
        searchShow.value = true;
      }
      searchShow.value = true;
    }).then(_=> {
      searching.value = false;
    })
  } else {
    searchShow.value = false;
  }
}

const cleanSearch = () => {
  searchShow.value = false;
  keyword.value = '';
}

</script>

<style scoped>
.search-box {
  padding: 10px 0 20px 0;
}
</style>